<template>
  <div class="home-container">
    <!--    导航条-->
    <van-nav-bar class="page-nav-bar" fixed>
      <template #title>
        <van-button icon="search" class="search-btn" to="/search" type="primary">搜索</van-button>
      </template>
    </van-nav-bar>
    <!--    /导航条-->
    <!--标签-->
    <van-tabs class="headers-tab" v-model="active" animated swipeable>
      <van-tab v-for="item in channelData" :key="item.id" :title="item.name">
        <!--      文章列表组件-->
        <ArticleList :channelId="item.id"></ArticleList>
      </van-tab>

      <template #nav-right>
        <div class="right-btn"><i class="toutiao toutiao-gengduo" @click="isPopupShow=true"></i></div>
        <div class="placeholder" style="position: static"></div>
      </template>
    </van-tabs>
    <!--/标签-->
    <!--    弹出层-->
    <van-popup
      v-model="isPopupShow"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '85%' }"

    >
      <!--弹出层内容      -->
      <PopupContent
        :activeIndex="active"
        :myChannels="channelData"
        @update-active="onUpdateActive"
      ></PopupContent>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannels } from '@/api/user'
import ArticleList from '@/views/Home/compoents/ArticleList'
import { Toast } from 'vant'
import PopupContent from '@/views/Home/compoents/PopupContent'
import { getItem } from '@/utils/storage'

export default {
  name: 'Home',
  data () {
    return {
      active: 0,
      channelData: null, // 频道数据
      isPopupShow: false
    }
  },
  components: {
    ArticleList, // 文章列表组件
    PopupContent // 弹出层内容
  },
  created () {
    this.getChannelData()
  },
  methods: {
    // 获取频道
    async getChannelData () {
      try {
        // 拿到本地数据
        const localChannels = getItem('HMTT-CHANNELS')
        // 判断用户未登录并且本地有数据
        if (!this.$store.state.user && localChannels) {
          this.channelData = localChannels
        } else {
          // 如果条件不能满足发起请求拿到默认频道数据
          const res = await getUserChannels()
          this.channelData = res.channels
        }
      } catch (e) {
        if (e.response.status === 401) {
          return Toast.fail('Token过期重新登录')
        }
        Toast.fail('系统异常')
      }
    },

    // 父组件点击我的频道跳转
    onUpdateActive (val, flag) {
      this.active = val
      this.isPopupShow = flag
    }
  }
}
</script>

<style scoped lang='less'>
.home-container {
  padding-top: 172px;

  /deep/ .van-nav-bar__title {
    max-width: unset;
  }

  .van-icon-search {
    color: #ffffff;
  }

  .search-btn {
    width: 555px;
    height: 64px;
    background: rgba(255, 255, 255, .2);
    border-radius: 32px;
  }

  /deep/ .headers-tab {
    .van-tabs__wrap {
      position: fixed;
      width: 100%;
      top: 92px;
      z-index: 2;
      height: 80px;
      border-bottom: 1px solid #EDEFF3;
    }

    .van-tabs__nav--line {
      padding: 0;
    }

    .van-tab {
      width: 200px;
      border-right: 1px solid #EDEFF3;

      .van-tab__text {
        font-size: 28px;
        color: #777;
      }
    }

    .van-tab--active {
      .van-tab__text {
        font-size: 30px;
        color: #888;
      }
    }

    // 条
    .van-tabs__line {
      width: 31px;
      height: 6px;
      bottom: 8px;
      background: #3296FA;
      border-radius: 3px;
    }

    .right-btn {
      width: 66px;
      height: 80px;
      background-color: rgba(255, 255, 255, .9);
      position: fixed;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .toutiao {
        font-size: 33px;
      }

      &::before {
        content: '';
        width: 2px;
        height: 58px;
        background-image: url(~@/assets/gradient-gray-line.png);
        position: absolute;
        left: 0;
        background-size: 100% 100%;
      }
    }

    .placeholder {
      width: 66px;
      height: 80px;
      flex-shrink: 0;
    }
  }
}
</style>
